<template>
  <view class="myPage">
    <scroll-view v-if="dataList.length > 0" scroll-x="false" scroll-y="true" @scrolltolower="getList">
      <view class="myList">
        <view v-for="(item, index) in dataList" :key="index" class="list-item" @click="goToDetail(item)">
          <view class="top">
            <text>{{ item.suggestionTypeName }}</text>
            <text :class="(item.replyContent && item.replyContent != '') ? 'active' : ''">{{ (item.replyContent && item.replyContent != '') ? '已答复' : '未答复'}}</text>
          </view>
          <text class="center">{{ item.suggestContent}}</text>
          <view class="images">
            <image v-for="(img, index) in item.attachmentList" :key="index" :src="url + img.attaPath"></image>
          </view>
          <text class="time">{{ item.createTime }}</text>
        </view>
        <view class="loadMore">{{ loadMore ? "数据加载中" : "没有更多内容了"}}</view>
      </view>
    </scroll-view>
    <view class="noData" v-else style="height: 100%;">
      <image :src="`${url}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
    <view class="footer-btn" @click="goToAdd" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) + 'px'}">
      <image :src="`${url}/statics/std/static/add.png`"></image>
      <text>新增投诉</text>
    </view>
  </view>
</template>

<script>
	import {requestGet} from '@/utils/request.js';
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js'
  const img_url = process.env.VUE_APP_BASEURL_IMG_API;
export default {
  data() {
    return {
      total: 0,
      dataList: [],
      pages:{
        pageNum: 1,
        pageSize: 10
      },
      loadMore: true,
      url: img_url
    };
  },
  computed: {
  	...mapGetters([GET_SAFEAREA_BOTTOM])
  },
  mounted() {
  	console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
  },
  onShow() {
    this.loadMore = true;
    this.pages = {
      pageNum: 1,
      pageSize: 10
    };
    this.dataList = [];
    this.getList()
  },
  methods: {
	  getList() {
      if(!this.loadMore){
        return
      }
		  requestGet('/suggestion/list',{...this.pages}, '/baseplatform').then(res => {
			  console.log('获取了list列表数据', res)
        if(res.code === 200){
          if(res.rows.length > 0){
            this.dataList.push(...res.rows);
            if(this.dataList.length < res.total){
              this.loadMore = true;
              this.pages.pageNum = this.pages.pageNum + 1;
            }else{
              this.loadMore = false;
            }
          }
        }
        console.log('111111111===', this.loadMore)
		  }).catch((err) => console.log('错误了', err))
	  },
    goToAdd(){
      uni.navigateTo({
        url: "/page_my/suggestion/add"
      })
    },
    goToDetail(item){
      uni.navigateTo({
        url: "/page_my/suggestion/details?id=" + item.id
      })
    }
  }
};
</script>

<style lang="scss" scoped>
  .myPage{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #F5F7F6;
  }
  .myList{
    height: calc(100vh - 152rpx);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 32rpx;
    margin-top: 16rpx;
    .list-item{
      width: calc(100% - 48rpx);
      padding: 20rpx 24rpx;
      height: 196rpx;
      background: #FFFFFF;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-top: 16rpx;
      .top{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text:first-child{
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.8);
          line-height: 44rpx;
          margin: 24rpx 0 16rpx 0;
        }
        text:last-child{
          width: 102rpx;
          height: 40rpx;
          background: #F6F6F6;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.3);
          line-height: 40rpx;
          text-align: center;
        }
        .active{
          color: #3FAA73 !important;
          background: #EDF3FE !important;
        }
      }
      .center{
        width: 100%;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
        font-weight: 300;
        color: rgba(0,0,0,0.7);
        line-height: 36rpx;
        word-break: break-all;
        // display: -webkit-box;
        // -webkit-line-clamp: 3; /* 控制最多显示两行 */
        // -webkit-box-orient: vertical;
        // overflow: hidden;
        // text-overflow: ellipsis;
      }
      .images{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin: 16rpx 0;
        image{
          flex: 0 0 auto;
          width: 152rpx;
          height: 152rpx;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-right: 24rpx;
        }
      }
      .time{
        width: 100%;
        font-size: 28rpx;
        font-family: Alibaba PuHuiTi 2.0-45 Light, Alibaba PuHuiTi 20;
        font-weight: 300;
        color: rgba(0,0,0,0.5);
        line-height: 36rpx;
        margin-bottom: 24rpx;
      }
    }
    .loadMore{
      display: block;
      width: 100%;
      font-size: 24rpx;
      color: rgba(0,0,0,0.5);
      text-align: center;
      line-height: 64rpx;
    }
  }
  .footer-btn{
    position: fixed;
    bottom: 34rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 598rpx;
    height: 84rpx;
    background: #3FAA73;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    image{
      width: 40rpx;
      height: 40rpx;
      flex: 0 0 auto;
    }
    text{
      font-size: 32rpx;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32rpx;
    }
  }
</style>